<template>
  <view>
    <view class="header">
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="flex-js" style="width: 100%">
        <view class="flex-center" @click="goIndex">
          <image class="logo" src="/static/logo.png"></image>
          <view class="title">百霸测评管理系统</view>
          <view class="ml2" v-if="state.studentInfo?.clue?.student_name">测评学员：{{ state.studentInfo?.clue?.student_name
            || "" }}</view>
        </view>
        <view class="flex-center">
          <view>登录用户：{{ state.userInfo.realname }}</view>
          <i @click="logout" class="iconfont icon-exit-full ml1 mr1"></i>
        </view>
      </view>
    </view>
    <view style="height: 140rpx"></view>
    <view :style="{ height: statusBarHeight + 'px' }"></view>
  </view>
</template>

<script setup>
import { useStore } from 'vuex'
const { state, commit, dispatch } = useStore()

const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight)

function goIndex() {
  const pages = getCurrentPages();
  const path = pages[pages.length - 1].route
  if (path === 'pages/index/index') return
  dispatch('goHome')
}

function logout() {
  dispatch('logout')
}
</script>

<style lang="scss">
.header {
  background-color: #377CB7;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  color: #ffff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;

  .logo {
    width: 100rpx;
    height: 100rpx;
  }

  .title {
    font-size: 40rpx;
    font-weight: bold;
    margin-left: 20rpx;
  }
}
</style>
